import "./style.css";

/**
 * 生成一个等差为 1 的对称数列
 * @param length - 数组长度
 * @returns
 * @example
 * generateSequence(5) => [-2, -1, 0, 1, 2]
 * generateSequence(6) => [-2.5, -1.5, -0.5, 0.5, 1.5, 2.5]
 */
const generateSequence = (length: number) => {
    if (length % 2 === 0) {
        return Array.from({ length }, (_, index) => index - Math.floor(length / 2) + 0.5);
    } else {
        return Array.from({ length }, (_, index) => index - Math.floor(length / 2));
    }
};

const cardELs = document.querySelectorAll(".card") as NodeListOf<HTMLDivElement>;

const sequence = generateSequence(cardELs.length);
const flipAnimationDuration = 2;
cardELs.forEach((cardEL, index) => {
    cardEL.style.setProperty("--i", `${sequence[index]}`);
    cardEL.style.setProperty("--d", `${flipAnimationDuration}s`);

    cardEL.addEventListener("click", () => {
        cardEL.classList.add("reverse");
        setTimeout(() => {
            cardEL.classList.remove("reverse");
        }, flipAnimationDuration * 1000);
    });
});
